<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>夏蓉</title>
    <link rel="stylesheet" href="./css/swiper.min.css">
    <style>
        
        *{
            margin:0;
            padding:0;
        }


        /* 最上方  top部分 */
        #top{
            width:15rem;
            height: 2rem;
            position:relative;
        }
        #top img{
            width:15rem;
            margin:0 auto;
            position:absolute;
        }
        #top .a1 {
            width: .6rem;
            height: .6rem;
            background: url(./images/top-left.png) no-repeat;
            background-size:.6rem;
            display: block;
            z-index:100;
            position: absolute;
            top: .64rem;
            left: .4rem;
        }
        #top .a2{
            width:90px;
            height:50px;
            position:absolute;
            top:0px;
            right:0px;
            z-index: 100;
        }

        /* 第二行 line-2部分 */
        #line-2 .bg-img{
            width: 15rem;;
            height: 3.6rem;;
        }
       
        #line2-part2 {
            width: 11.4rem;;
            height: 1.76rem;;
            display:flex;
            margin:0 auto;
            justify-content:center;
            align-items:center;
            position:absolute;
            top: 2.04rem;;
            left: 1.72rem;;
        }

        .line2-left img , .line2-right img{
            width: .72rem;
            height: 1.2rem;;
        }

        #line2-part2  a{
            display:block;
            
        }
        
       .line2-center img{
            width:8rem;
            height:1.52rem;
            margin-left:1.8rem;
            margin-right:1.8rem;
            
        }

        /* 搜索框 */
        .research{
                
                width:95%;
                position:absolute;
                top: 4rem;;
                display: flex;
                z-index: 10;
                align-items: center;
            }
            .xl{
                background-image: url(./images/search.png);
                background-repeat: no-repeat;
                background-position: .48rem .2rem;
                background-size:.60rem auto;
                width:1.4rem;
                height:100%;
            }
            .sousuo{
                height: 1.12rem;;
                display: flex;
                border: 1px solid #fff;
                background-color: #fff;
                margin-left:.48rem;
                border-radius:.8rem;
                flex: 1;
            }
            .sousuo input{
                flex: 1 ;
                border:0;
                outline: none;
                margin-right:.4rem;
                
            }


        /* 轮播图 */

        #lunbo .bg-img2{
           position:absolute;
           top:4rem;
           left:0;
           width:15rem;
           height:6.8rem;
        }
        html,
        body {
            position: relative;
            height:32rem;
            background-color: #F7F7F7;
            }

        .swiper-container {
            width: 100%;
            height: 100%;
     }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      /* background: #fff; */

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

    .swiper-pagination{
        position:absolute;
        left:6.4rem;
    }

    .swiper-wrapper img{
        width:90%;
        height:6rem;
        border-radius:.8rem;

    }



             
/* 导航栏---nav */
        .box {
            margin-top:.8rem;
            margin-left: 5%;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
            font-size: .48rem;
            color: #666;
            text-align: center;
        }

        .nav {
            width: 100%;
            height: 6.48rem;
        }

        .nav li {
            width: 20%;
            height: 2.96rem;
            float: left;

        }

        .nav li img {
            width:1.6rem;
            display: block;
        }
    


        /* nav2 导航栏2 */
        #gift{
            width:15rem;
            height:4.68rem;
            display:flex;
        }

        #gift .he{
            width:.08rem;
            height:4.68rem;
            background-color:#f2f2f2;

        }

        #gift .a {
            width:7.43rem;
        }

        #gift .b,.c{
            width:3.68rem;
        }


        /* 页面最底部 */

        .bottom-img img{
            width:15rem;
            position:fixed;
            bottom:2rem;
            
        }

        #footer{
            width:15rem;
            height:2rem;
            background-color:white;
            position:fixed;
            bottom:0;
        }

        .footer-in{
            width:13.6rem;
            height:2rem;
            background-color:white;
            position:fixed;
            bottom:0;
            left:.64rem;
            display:flex;
            justify-content:space-between;
            align-items:center;
           
        }

        .footer-in a{
            display:block;
        }

        .footer-in span{
            display:block;
            
        }
        .footer-in img{
            width:.96rem;
            height:.96rem;
        }

        .footer-in a:nth-child(1) span{
            color:#000000;
            z-index:200;
        }




        /* 右侧固定图片 */
        #right-img a .img-1{
            display: block;
            width:2rem;
            height:2rem;
            position:fixed;
            right:.2rem;
            top:12rem;
        }

        #right-img a .img-2{
            width:2rem;
            height:2.88rem;
            position:fixed;
            right:.2rem;
            top:16.8rem;
        }




        /* 媒体查询 */
        @media screen and (min-width:375px){
            html{
                font-size:25px;
            }
        }
        
       


    </style>
</head>
<body>
    <!-- 右侧固定图片 -->
    <div id="right-img">
        <a href="javascript:,">
            <img src="./images/签到红包.gif" alt="" class="img-1">
        </a>

        <a href="javascript:,">
            <img src="./images/签到.gif" alt="" class="img-2">
        </a>
    </div>

    
    <!-- Top部分 -->
    <div id="top">
        <img src="./images/top.jpg" alt="top-img">
        <a href="javascript:," class="a1"></a>
        <a href="javascript:," class="a2"></a>
    </div>


    <!--第二行 line-2部分  -->
    <div id="line-2">
        <img src="images/line-2 background.png" alt="" class="bg-img">
    </div>

    <div id="line2-part2">
        <a href="javascript:," class="line2-left">
            <img src="./images/line-2 left.png">
        </a>

       
        <a href="javascript:," class="line2-center">
            <img src="./images/line-2 center.gif">
        </a>
        

        <a href="javascript:," class="line2-right">
            <img src="./images/line-2 right.png">
        </a>
        
    </div>

    
    <!--  line-2部分的——搜索框  -->
    <div class="research">
        <div class="sousuo">
          <div class="xl"></div>
            <input type="text" placeholder="生活家电每满300减40">
        </div>
      </div>
      
    <!-- 轮播图 -->
    <div id="lunbo">
        <img src="./images/lunbo-img.png" alt="轮播背景图" class="bg-img2">
        <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide"><img src="./images/1.png"></div>
              <div class="swiper-slide"><img src="./images/2.jpg"></div>
              <div class="swiper-slide"><img src="./images/3.jpg"></div>
              <div class="swiper-slide"><img src="./images/4.jpg"></div>
              <div class="swiper-slide"><img src="./images/5.png"></div>
              <div class="swiper-slide"><img src="./images/6.png"></div>
              <div class="swiper-slide"><img src="./images/7.jpg"></div>
              <div class="swiper-slide"><img src="./images/8.png"></div>
            </div>
        </div>

     <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <!-- <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div> -->
    </div>

   <script src="./js/swiper.min.js"></script>
   <script>
    var swiper = new Swiper('.swiper-container', {
      spaceBetween:20,
      centeredSlides: true,
      loop:true,
      autoplay: {
        delay:1500,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      }
    });
   </script>



    <!-- nav 导航栏 -->
    <div class="box">
    <ul class="nav">
        <li><a href="javascript:;"><img src="./images/苏宁秒杀.png" alt="">
                <sapn>苏宁秒杀</sapn>
            </a></li>
            <li><a href="javascript:;"><img src="./images/苏宁超市.png" alt="">
                <sapn>苏宁超市</sapn>
            </a></li>
            <li><a href="javascript:;"><img src="./images/苏宁拼购.png" alt="">
                <sapn>苏宁拼购</sapn>
            </a></li>
            <li><a href="javascript:;"><img src="./images/手机数码.png" alt="">
                <sapn>手机数码</sapn>
            </a></li>
            <li><a href="javascript:;"><img src="./images/苏宁家电.png" alt="">
                <sapn>苏宁家电</sapn>
            </a></li>
            <li><a href="javascript:;"><img src="./images/免费水果.png" alt="">
                <sapn>免费水果</sapn>
            </a></li>
            <li><a href="javascript:;"><img src="./images/super会员.png" alt="">
                <sapn>super会员</sapn>
            </a></li>
            <li><a href="javascript:;"><img src="./images/签到有礼.png" alt="">
                <sapn>签到有礼</sapn>
            </a></li>
            <li><a href="javascript:;"><img src="./images/领券中心.png" alt="">
                <sapn>领券中心</sapn>
            </a></li>
            <li><a href="javascript:;"><img src="./images/更多频道.png" alt="">
                <sapn>更多频道</sapn>
            </a></li>
    </ul>
    </div>

    <!-- nav2 导航栏2 -->
    <div id="gift">
    <a href="javascript:,">
        <img src="./images/新人大礼包.png" alt="" class="a">
    </a>
    <div class="he"></div>

    <a href="javascript:,">
        <img src="./images/1分包邮.gif" alt="" class="b">
    </a>
    <div class="he"></div>

    <a href="javascript:,">
        <img src="./images/1分包邮2.gif" alt="" class="c">
    </a>
    </div>


    <!-- 页面最底部 -->
    <div class="bottom-img">
        <a href="javascript:,">
            <img src="./images/立即登录.png">
        </a>
    </div>
    <div id="footer">
        <div class="footer-in">
        <a href="javascript:;">
            <img src="./images/猜你喜欢.png">
            <span>猜你喜欢</span>
        </a>
        <a href="javascript:;">
            <img src="./images/分类.png">
            <span>分类</span>        
        </a>
        <a href="javascript:;">
            <img src="./images/排行榜.png">
            <span>排行榜</span>
        </a>
        <a href="javascript:;">
            <img src="./images/购物车.png">
            <span>购物车</span>
        </a>
        <a href="javascript:;">
            <img src="./images/我的易购.png">
            <span>我的易购</span>
        </a>
        </div>
    </div>


</body>
</html>